<template>
	<view class="container">

		<view class="login-logo">

			<view class="logo-text"><text>设备信息采集器</text></view>

		</view>

		<view>

			<form @submit="formSubmit" method="post">
				<view>

					<view class="icon-input">
						<span class="icon iconfont iconzhanghao"></span>
						<input class="input" maxlength="20" name="username" placeholder="登录账号" v-model="username" />
					</view>
				</view>

				<view>

					<view class="icon-input">
						<span class="icon iconfont iconmima"></span>
						<input class="input" type="password" name="passwd" maxlength="20" placeholder="密码" v-model="passwd" />
					</view>
				</view>

				<view class="btn">

					<button formType="submit" class="cu-btn login-btn margin-tb-sm lg" :loading="loading">登录</button>

				</view>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const toast = (title) => {
		uni.showToast({
			title
		})
	}

	export default {

		data() {
			return {
				loading: false,
				username: "admin",
				passwd: "Yhkj123!"

			}
		},
		onShow() {

			this.loading = false;
		},
		methods: {

			formSubmit(e) {
                this.loading = true;
				const server = this.$config.serverUrl;
				const url = `${server}/mis/api/wechat/login`
				this.$http.request(url, e.detail.value, {
					method: 'POST',
					timeout: 5000,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {

					console.log(res)
					if (res.status === this.$consts.CODE_SUCCESS) {

						app.globalData.token = res.data.token
						global.token = res.data.token
						app.globalData.username = this.username;
						uni.navigateTo({
							url: "/pages/requestInstall/requestInstall"
						})
					} else {
						toast("登录失败")
					}

					this.loading = false;
				}).catch(err => {
					this.loading = false;
					console.error(err)
					toast("网络异常")
				})

			}

		}
	}
</script>

<style scoped lang="scss">
	.icon-input {

		position: relative;
		width: 90%;
		margin: 60upx auto;
		color: $color-text-white;


		.input {


			border: 1px solid $color-border-grey;
			height: 90upx;
			padding-left: 70upx;
			padding-right: 20upx;
			font-size: 33upx;
			color: $color-text-grey--dark;
			background-color: $color-text-white;

		}

		.icon {
			position: absolute;
			left: 20upx;
			top: 50%;
			transform: translateY(-50%);
			color: $color-text-grey;
		}
	}

	.login-logo {
		position: relative;
		width: 100%;
		height: 28vh;
		background-color: $color-bg-primary;

		.logo-text {
			position: absolute;
			top: 50%;
			left: 50%;
			height: 100%;
			width: 100%;
			transform: translate(-50%, -50%);
			color: $color-text-white;
			line-height: 400upx;
			text-align: center;
			font-size: 50upx;

		}
	}

	.container {
		background-color: $color-bg-primary--light;
		height: 100vh;
	}



	.btn {
		text-align: center;

		.login-btn {
			width: 90%;

			background-color: $color-bg-primary--lighter;
			border: 1px solid $color-border-blue;
			color: $color-text-white;


		}
	}
</style>
